<template>
  <div class="main">
    <div class="subMitBox">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="账号"
          name="userName"
          :rules="[{ required: true, message: '请输入账号' }]"
        >
          <a-input
            placeholder="请输入账号"
            v-model:value="formState.userName"
          />
        </a-form-item>
        <a-form-item
          label="密码"
          name="passWord"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password
            placeholder="请输入密码"
            v-model:value="formState.passWord"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
          <a-button
            :loading="loading"
            size="large"
            block
            type="primary"
            html-type="submit"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouterInfo } from "@/pinia/router";
import { useNotif } from "@/hooks/message";
import service from '@/axios'
import router from '@/router'
import { message } from 'ant-design-vue';
import {useStore} from '@/pinia/user'
const userStore = useStore()
const formState = ref({
  userName: "",
  passWord: "",
});
const loading = ref(false);
const onFinish = async () => {
  loading.value = true;

  service.post('users/login',formState.value).then(res=>{
    debugger
    if(res.data[0] && res.data[0].id){
      router.push('/records')
      localStorage.setItem('userInfo',JSON.stringify(res.data[0]))
      userStore.setUserName(res.data[0].userName)
    }else{
      debugger
      message.warning(res.data)
    }
  })

  loading.value = false;
};

const onFinishFailed = () => {
  useNotif("登录失效", "error", true);
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subMitBox {
  width: 400px;
  padding: 80px 20px 20px 20px;
  border-radius: 10px;
  // height: 500px;
  box-shadow: 1.3px 1.6px 16.1px rgba(0, 0, 0, 0.025),
    2.9px 3.4px 19.7px rgba(0, 0, 0, 0.034),
    4.8px 5.8px 21px rgba(0, 0, 0, 0.039),
    7.2px 8.7px 21.3px rgba(0, 0, 0, 0.042),
    10.4px 12.5px 21.2px rgba(0, 0, 0, 0.043),
    14.7px 17.7px 21.1px rgba(0, 0, 0, 0.045),
    20.9px 25.1px 21.1px rgba(0, 0, 0, 0.046),
    30.3px 36.5px 21.9px rgba(0, 0, 0, 0.049),
    46.7px 56.3px 24.3px rgba(0, 0, 0, 0.055),
    83px 100px 33px rgba(0, 0, 0, 0.07);
}
</style>